<!--头部组件-->
<template>
  <a-layout-header>
    <div class="header-content">
      <!-- 头部LOGO -->
      <router-link to="/home" class="header-logo" tag="div">
        <img src="../assets/img/logo.png" alt="">
        <div class="header-title">人事档案查询系统</div>
      </router-link>
      <!-- 查询组件 -->
      <div class="header-search" v-if="showFun">
        <a-input-search placeholder="请输入查询内容" @search="onSearch" style="width: 500px">
          <a-button slot="enterButton" icon="search">
            案卷查询
          </a-button>
        </a-input-search>
      </div>
      <div class="header-right">
        <div class="btn-item" @click="exportFolder" v-if="showFun">
          <a-icon type="read" />
          <div class="btn-title">案卷</div>
        </div>
        <div class="btn-item" @click="exportFile" v-if="showFun">
          <a-icon type="profile" />
          <div class="btn-title">卷内</div>
        </div>
        <a-dropdown placement="bottomRight">
          <div class="btn-item">
            <img src="../assets/img/user.png" alt="">
            <div class="btn-title">{{ userName }}</div>
          </div>
          <a-menu slot="overlay">
            <a-menu-item key="1">
              <router-link to="/editPassword"><a-icon type="edit" style="margin-right: 8px;" />修改密码</router-link>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="2">
              <router-link to="/auth"><a-icon type="safety" style="margin-right: 8px;" />权限设置</router-link>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="3" @click="loginOut"><a-icon type="logout" />退出登录</a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>
  </a-layout-header>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    showFun: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      userName: JSON.parse(sessionStorage.getItem('USER_DATA')).aU_LoginId
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    onSearch (value) {
      this.$emit('onSearch', value)
    },
    exportFolder () {
      this.$emit('exportFolder')
    },
    exportFile () {
      this.$emit('exportFile')
    },
    // 退出登录
    loginOut () {
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗?',
        onOk: () => {
          sessionStorage.clear() // 清除sessionStorage
          window.location.reload()
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
header {
  height: 64px;
  background: #FFF;
  border: 1px solid #EEE;
  line-height: inherit;
  .header-logo {
    height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
    img {
      width: 40px;
      height: 100%;
    }
    .header-title {
      margin-left: 10px;
      font-size: 24px;
      font-family: KaiTi;
    }
  }
  .header-content {
    width: 980px;
    height: 100%;
    color: #333;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /deep/ .header-search {
      .ant-input {
        background: #f0f0f0;
        color: #999;
      }
      .ant-btn {
        background-image: linear-gradient(90deg,#16e05a 0,#16e09d);
        color: #FFF;
      }
    }
  }
  .header-right {
    display: flex;
    .btn-item {
      width: 40px;
      height: 64px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-left: 20px;
      color: #666;
      cursor: pointer;
      &:hover {
        .anticon, .btn-title {
          color: #16e09d;
        }
      }
      .anticon {
        font-size: 18px;
      }
      .btn-title {
        line-height: 24px;
        font-size: 16px;
      }
      img {
        width: 18px;
        height: 18px;
        border-radius: 50%;
      }
    }
  }
  @media screen and (min-width: 1820px) {
    .header-content {
      width: 1660px;
    }
  }
  @media screen and (max-width: 1819px) and (min-width: 1580px) {
    .header-content {
      width: 1420px;
    }
  }
  @media screen and (max-width: 1579px) and (min-width: 1348px) {
    .header-content {
      width: 1252px;
    }
  }
  @media screen and (max-width: 1347px) and (min-width: 1200px) {
    .header-content {
      width: 1040px;
    }
  }
}
</style>
